<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <template v-for="item in topPanelData" :key="item.title">
        <el-col :md="12" :lg="6" :xl="6">
          <statistical-panel :panelData="item" />
        </el-col>
      </template>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="7">
        <lt-card title="分类商品数量（饼图）">
          <pei-echarts :peiData="peiData" />
        </lt-card>
      </el-col>
      <el-col :span="10">
        <lt-card title="不同城市商品销售">
          <map-echarts :mapData="mapData" />
        </lt-card>
      </el-col>
      <el-col :span="7">
        <lt-card title="分类商品数量（玫瑰图）">
          <rose-echarts :peiData="peiData" />
        </lt-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <lt-card title="分类商品的销售">
          <line-echarts v-bind="lineData" />
        </lt-card>
      </el-col>

      <el-col :span="12">
        <lt-card title="分类商品的收藏">
          <bar-echarts v-bind="barData"></bar-echarts>
        </lt-card>
      </el-col>
    </el-row>
    <echarts></echarts>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import ltCard from '../../../../components/card/index'
import StatisticalPanel from '../../../../components/statistical-panel/index'
import {
  peiEcharts,
  roseEcharts,
  lineEcharts,
  barEcharts,
  mapEcharts
} from '../../../../components/page-echarts/index'
import { useStore } from '../../../../store/store'

export default defineComponent({
  name: 'dashboard',
  components: {
    ltCard,
    peiEcharts,
    roseEcharts,
    lineEcharts,
    barEcharts,
    mapEcharts,
    StatisticalPanel
  },
  setup() {
    const store = useStore()
    store.dispatch('dashboard/getDashboardDataActive')
    const topPanelData = computed(() => store.state.dashboard.topPanelDatas)
    const peiData = computed(() => {
      return store.state.dashboard.categoryGoodsCount.map((item) => {
        return { name: item.name, value: item.goodsCount }
      })
    })
    const lineData = computed(() => {
      const values = []
      const sale = []
      const categoryGoodsSale = store.state.dashboard.categoryGoodsSale
      for (const item of categoryGoodsSale) {
        values.push(item.name)
        sale.push(item.goodsCount)
      }
      return { values, sale }
    })
    const barData = computed(() => {
      const values = []
      const sale = []
      const categoryGoodsFavor = store.state.dashboard.categoryGoodsFavor
      for (const item of categoryGoodsFavor) {
        values.push(item.name)
        sale.push(item.goodsFavor)
      }
      return { values, sale }
    })
    const mapData = computed(() => {
      return store.state.dashboard.addressGoodsSale.map((item) => {
        return { name: item.address, value: item.count }
      })
    })
    return {
      peiData,
      lineData,
      barData,
      mapData,
      topPanelData
    }
  }
})
</script>

<style scoped></style>
